<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
    <!-- 选项卡导航 -->
    <h4>选项卡导航</h4>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link active" href="#tab1">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#tab2">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#tab3">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#tab4">lorem</a>
            </li>
        </ul>
        <!-- 对应的内容 -->
        <div class="tab-content">
            <div id="tab1" class="tab-pane active">Dior,chanel,故宫,YSL,TF</div>
            <div id="tab2" class="tab-pane">爱马仕,LV,GUCCI,香奈儿</div>
            <div id="tab3" class="tab-pane">百合,玫瑰,满天星</div>
            <div id="tab4" class="tab-pane">百丽,tata,天美意</div>
        </div>
    </div>

    <hr>

    <div class="container">
        <!-- 胶囊导航 -->
        <h4>胶囊导航</h4>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a data-toggle="pill" class="nav-link active" href="#pill1">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#pill2">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#pill3">lorem</a>
            </li>
            <li class="nav-item">
                <a data-toggle="tab" class="nav-link" href="#pill4">lorem</a>
            </li>
        </ul>
        <!-- 对应的内容 -->
        <div class="tab-content">
            <div id="pill1" class="tab-pane active">Dior,chanel,故宫,YSL,TF</div>
            <div id="pill2" class="tab-pane">爱马仕,LV,GUCCI,香奈儿</div>
            <div id="pill3" class="tab-pane">百合,玫瑰,满天星</div>
            <div id="pill4" class="tab-pane">百丽,tata,天美意</div>
        </div>
    </div>

    <hr>

    <div class="container">
        <!-- 导航栏 -->
        <h4>导航栏</h4>
        <div class="navbar navbar-expand">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">导航1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">导航2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">导航3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">导航4</a>
                </li>
            </ul>
        </div>
    </div>

    <hr>
    
    <div class="container">
        <!-- 折叠 -->
        <h4>折叠</h4>
        <button data-toggle="collapse" data-target="#d1" class="btn btn-success">折叠</button>
        <div class="collapse" id="d1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, laudantium quisquam accusantium eligendi iusto quae provident distinctio, debitis architecto expedita vero! Animi doloremque ea provident minus laborum consequuntur illo porro possimus, laudantium adipisci distinctio voluptate velit laboriosam quaerat similique veritatis labore iure quam deleniti, corrupti excepturi. Exercitationem dolores doloremque explicabo.
        </div>
    </div>

    <hr>

    <div class="container">
        <!-- 卡片 -->
        <h4>卡片</h4>
        <div class="card">
            <div class="card-header">弹性,Y轴为主轴</div>
            <div class="card-body">下面三个可以不要</div>
            <div class="card-footer">Lorem ipsum dolor sit amet.</div>
        </div>
    </div>

    <hr>
    <div class="container">
        <!-- 手风琴效果 -->
        <h4>手风琴效果</h4>
        <div id="parent">
            <div class="card">
                <div class="card-header">
                    <a href="#s1" data-toggle="collapse">卡片1</a>
                </div>
                <div id="s1" class="collapse" data-parent="#parent">
                    <div class="card-body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam repudiandae iusto praesentium non omnis nulla veniam. Ad veritatis culpa quaerat.</div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <a href="#s2" data-toggle="collapse">卡片1</a>
                </div>
                <div id="s2" class="collapse" data-parent="#parent">
                    <div class="card-body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam repudiandae iusto praesentium non omnis nulla veniam. Ad veritatis culpa quaerat.</div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <a href="#s3" data-toggle="collapse">卡片1</a>
                </div>
                <div id="s3" class="collapse" data-parent="#parent">
                    <div class="card-body">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam repudiandae iusto praesentium non omnis nulla veniam. Ad veritatis culpa quaerat.</div>
                </div>
            </div>

        </div>
    </div>

    <hr>

    <div class="container">
        <!-- 折叠导航栏 -->
        <h4>折叠导航栏</h4>
        <div class="navbar navbar-dark bg-dark navbar-expand-md">
            <!-- 1.从来不隐藏的菜单 -->
            <a href="#" class="navbar-brand">Bootstrap中文网</a>
            <!-- 2.按钮,大屏隐藏,小屏显示 -->
            <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                <!-- <i class="fa fa-bars" aria-hidden="true"></i>fontawesome的菜单标签 -->
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 3.隐藏的菜单,小屏隐藏,大屏显示,小屏纵向显示,大屏横向显示 -->
            <div class="collapse navbar-collapse" id="menu">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">boot1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">boot1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">boot1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">boot1</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <hr>

    <div class="container">
        <!-- 媒体对象 -->
        <h4>媒体对象</h4>
        <div class="media">
            <img src="../img/footerFont.png" class="mr-3">
            <div class="media-body">
                <h4>闪闪亮亮</h4>
                <p>男子天团</p>
            </div>
        </div>
    </div>

    <hr>

    <div class="container">
        
    </div>

    <hr>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>